<!--
名称: 下拉菜单组件
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <el-dropdown id="ADropdown"  size="mini" >
        <el-button type="primary" v-if = 'isUseButton'>
            {{title}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button >
        <span class="el-dropdown-link" v-if = '!isUseButton'>
            {{title}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, i) in options" :key="i" @click.native="operFunc(item['key'])"> {{ item['value'] }}
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
    export default {
        name: 'ADropdown',
        props: {
            options: {
                type: Array
            },
            title: {
                type: String
            },
            isUseButton: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            operFunc (val) {
                this.$emit('operFunc', val)
            }
        }
    }
</script>

<style scoped>
    #ADropdown
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-button--primary {
        color: white;
        background-color: #f04959;
        border-radius: 4px !important;
        border-color: #f04959 !important;
    }
    .el-button--primary:hover {
        color: #000000 !important;
        background-color: white !important;
        border-radius: 4px !important;
        border-color: #f04959 !important;
    }
    .el-button--primary:active {
        color: #000000 !important;
        background-color: white !important;
        border-radius: 4px !important;
        border-color: #4299ce !important;
    }
    .el-button--primary:focus {
        color: #000000 !important;
        background-color: white !important;
        border-radius: 4px !important;
        outline:none;
        border-color: #f04959 !important;
    }

</style>
